<template>
  <div>
      <!-- 导航栏 -->
  <van-nav-bar title="核销优惠卷" >
  <template #left>
    <van-icon name="cross"  size="20"/>
  </template>
  <template #right>
    <i class="iconfont icon-nav_ico_menu_h"></i>
  </template>
</van-nav-bar>


<input type="text" placeholder="请输入优惠卷卡密" v-model="input">
<van-button round block type="info" native-type="submit" @click="showPopup">确定</van-button>



<van-popup v-model="show">

   <div class="motaikuang">
     <img src="../assets/iconfont/组 14.jpg" alt="">
   </div>
   <van-button round block type="info" native-type="submit" class="btn1" @click="queding">确定</van-button>
</van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      input:''
    }
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    queding() {
      this.show = false,
      this.input = ''
    }
    
  }
}
</script>

<style scoped lang="less">

.van-nav-bar{
  background-color: #101010;
 }

 .iconfont {
  color: white;
 }
 ::v-deep .van-nav-bar__title {
  color: white;
 }
 input {
  text-align: center;
  margin-left: 60px;
  margin-top: 35px;
  width: 250px;
   border: 2.5px solid #ededed;
   border-radius: 5px;
   height: 40px;
   margin-bottom: 20px;
 }
 .van-button--block {
 background-image: linear-gradient(#f77a42,#fe9a5c);
  width: 70%;
  border-color: #f77a42;
  height: 35px;
  margin: 0 auto;
 }
 input::-webkit-input-placeholder { /* WebKit browsers */ 
color:#a7a7a7; 
} 
.motaikuang {
  border-radius: 10px;
  position: relative;
  width: 280px;
  height: 280px;
}
.btn1 {
  position: absolute;
  bottom: 10%;
  left: 15%;
}
</style>